import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

function Topics() {
    const { page, list, loading } = useSelector((state) => state.topics);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch({
            type: "updateTopics",
            page,
        });
    }, [page]);
    return (
        <div>
            <h2>主题列表 - 第{page}页</h2>
            {loading ? (
                <h2>正在请求数据</h2>
            ) : (
                <ul>
                    {list.length > 0
                        ? list.map((item) => (
                              <li key={item.id}>{item.title}</li>
                          ))
                        : "暂无数据"}
                </ul>
            )}
            <button
                onClick={() => {
                    dispatch({ type: "topics_next" });
                }}
            >
                下一页
            </button>
        </div>
    );
}

export default Topics;
